<template>
  <div class="table-ctrl-body">
    <!--按钮组-->
    <div class="Btns-ctrl-body">

      <!--高级搜索-->
            <SearchPublic
            :searchObj="searchObj"
            @searchParams="searchParamsFn"
            ></SearchPublic>

<!--      <div class="search-ctrl f-l">
        <form style="height: 100%;">
          <input placeholder="根据预案物资名称查询" @keyup="defaultLoad($event)" v-model="searchContent" class="search-text">
          &lt;!&ndash;    <button class="search-btn btn btn-default" type="button">更多条件</button>&ndash;&gt;
          <button class="search-btn btn btn-info" @click="searchDotResource" type="button">搜索</button>
        </form>
      </div>-->

      <div class="btns f-r">
        <button type="button" class="btn btn-info" @click="toggleAddModal">新增</button>
        <button type="button" class="btn btn-warning" @click="toggleRevampModal">修改</button>
        <button type="button" class="btn btn-danger" @click="deleteFn">删除</button>
        <button type="button" class="btn btn-success" @click="detailsModalFn">详情</button>
        <!--      <button type="button" class="btn btn-success" @click="isDetailsModalFn">详情</button>-->
        <!--   <button type="button" class="btn btn-info">添加重点人关系</button>
           <button type="button" class="btn btn-danger">删除重点人关系</button>-->
      </div>
    </div>
    <!--按钮组闭合-->
    <!--表格组-->
    <div class="table-ctrl">
      <!--表格头-->
      <!--{{treeTableRow}}-->
      <div class="table-header">
        <table class="table-default">
          <thead>
          <tr>
            <th v-for="ths in tableHeader">
              {{ths.value}}
            </th>
          </tr>
          </thead>
        </table>
      </div>
      <!--表格中部-->
      <div class="table-overflowX">
        <table class="table-default">
          <tbody>
          <tr
            v-for="(trs,index) in tableRow.data"
            @click="selectRow(trs,index)"
            :class="{active: index === isActive}"
          >
            <td v-for="tds in tableHeader" :title="[trs,tds.key] | caseResourceFilter">
              {{[trs,tds.key] | caseResourceFilter }}
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!--表格翻页-->
      <Pages
        v-show="tableRow.elementsSum !== 0"
        v-if="tableRow"
        :showItem="10"
        :pageSize="20"
        :allDataSum="tableRow.elementsSum"
        :allpage="(Math.ceil(tableRow.elementsSum/20))"
        @current-change="tablePageData"
      ></Pages>

    </div>

    <!--新增-->
    <AddCaseListModal
      :addModalObj="addModalObj"
      @closeModal="toggleAddModal"
    ></AddCaseListModal>

    <!--修改-->
    <RevampCaseListModal
      :RevampModalObj="RevampModalObj"
      :selectRowId="selectRowId"
      @closeRevampModal="toggleRevampModal"
      :isDetailsModal="isDetailsModal"
    ></RevampCaseListModal>

  </div>
</template>

<script>
    import Pages from "../../sudoku/atom/pages.vue"
    import AddCaseListModal from "./AddCaseListModal"
    import RevampCaseListModal from "./RevampCaseListModal"
    import SearchPublic from "../../publicTemplate/search/SearchPublic"
    export default {
        name: "CaseListTable",
        data(){
          return{
            isActive:-1,
            selectRowId:"",
            tableHeader:[
              {"key":"caseTypeName","value":"案件类型"},
              {"key":"caseNatureName","value":"案件性质"},
              {"key":"natureDetailsName","value":"性质细分"},
              {"key":"fieldSituation","value":"现场情形"},
              {"key":"emergencyFacilityModelList","value":"所需资源"},
              {"key":"createTime","value":"更新时间"},
            ],
            tableRow:[],
            addModalObj:{
              isShow:false,
              upUserId:""
            },
            RevampModalObj:{
              isShow:false,
              upUserId:""
            },
            searchContent:"", //搜索设备号
            isDetailsModal:false, //是否为查看界面
            imgSrc:"",
            params : {
              pageIndex:"1",
              pageSize:"20",
              caseType:'',
              caseNature:'',
              natureDetails:'',
            },
            searchObj:{
              condition:[],
              htmlType:"caseList",
            }
          }
        },
        components:{
          Pages,
          AddCaseListModal,
          RevampCaseListModal,
          SearchPublic
        },
        created(){
          //初始化页面
          this.tableRowAjax();
          //初始化搜索条件
          this.getCaseType();
        },
        methods:{
          //获取案件类型
          getCaseType(){
            //GET /benchmark/caseType
            this.$axios.get(this.HOST+"/benchmark/caseType")
              .then(res=>{
                //console.log(res);
                let caseTypeAll = res.data.data;
                //console.log(caseTypeAll);
                this.searchObj.condition = [];
                this.searchObj.condition.push({
                  type:"selectThree",
                  data:caseTypeAll,
                  params:['caseType','caseNature','natureDetails']
                })
              })
              .catch(err=>{
                //console.log(err);
              })
          },
          //加载表格
          tableRowAjax(){
            //POST /base/query/page
            //console.log(this.params);
            //debugger; GET /benchmark/info
            this.$axios.get(this.HOST+"/benchmark/info",{
              params:this.params
            })
              .then((data)=>{
                //console.log(data);
                this.tableRow = data.data;
                //清除选择
                this.clearSelect();
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //翻页加载
          tablePageData(page){
            this.params.pageIndex = page;
            this.tableRowAjax();
            ////console.log(page);
          },
          //新增弹窗显示与隐藏
          toggleAddModal(){
            this.addModalObj.isShow = !this.addModalObj.isShow;
            if( this.addModalObj.isShow === false ){
              //重新加载表格
              this.tableRowAjax();
            }
          },
          //修改弹窗显示与隐藏
          toggleRevampModal(){
            if( this.selectRowId !=="" ){
              this.RevampModalObj.isShow = !this.RevampModalObj.isShow;
              this.isDetailsModal = false;
            }else{
              this.isDetailsModal ? this.s_alert("请选择需要查看的预案！") : this.s_alert("请选择需要修改的预案！");
            }
            if( this.RevampModalObj.isShow === false ){
              //重新加载表格
              this.tableRowAjax();
            }
          },
          //搜索功能
          searchDotResource(){
            if( this.searchContent === "" ){
              this.params.conditions = [];
            }else{
              this.params.conditions = [
                {"field":"NAME","symbol":"like","value":"%"+this.searchContent+"%"}
              ];
            }
            this.tableRowAjax();
          },
          //选择行
          selectRow(obj,index){
            //console.log(obj);
            this.selectRowId = obj.id;
            this.isActive = index;
          },
          //查看详情
          isDetailsModalFn(){
            if( this.selectRowId !=="" ){
              this.RevampModalObj.isShow = !this.RevampModalObj.isShow;
              this.isDetailsModal = true;
            }else{
              this.s_alert("请选择需要查看的预案！");
            }
          },
          //默认加载
          defaultLoad(ev){
            if( ev.keyCode === 8 ){
              if( this.searchContent === "" ){
                this.searchDotResource();
              }
            }
          },
          //删除
          deleteFn(){
            if( this.selectRowId !=="" ){
              let msg = confirm("请问是否删除该预案？");
              if( msg ){
                //DELETE /base/remove
                this.$axios.delete(this.HOST+"/benchmark/info",{
                  data:[this.selectRowId]
                })
                  .then((data)=>{
                    //console.log(data);
                    this.s_alert("删除成功！");
                    this.s_logwrite("预案管理-预案预案管理","删除预案");
                    this.tableRowAjax();
                  })
                  .catch((err)=>{
                    this.s_alert("删除失败！");
                    //console.log(err);
                  })
              }
            }else{
              this.s_alert("请选择需要删除的预案！");
            }
          },
          //搜索
          searchParamsFn(searchParams){
            //console.log(searchParams);
            for( let paramsKey in this.params ){
              for( let searchParamsKey in searchParams ){
                if( paramsKey === searchParamsKey ){
                  this.params[paramsKey] = searchParams[searchParamsKey]
                }
              }
            }
            this.tableRowAjax();
          },
          //查看预案详情
          detailsModalFn(){
            if( this.selectRowId !=="" ){
              this.RevampModalObj.isShow = !this.RevampModalObj.isShow;
              this.isDetailsModal = true;
            }else{
              this.s_alert("请选择需要查询的预案！");
            }
            if( this.RevampModalObj.isShow === false ){
              //重新加载表格
              this.tableRowAjax();
            }
          },
          //清除选择
          clearSelect(){
            this.isActive=-1;
            this.selectRowId="";
          }
        }
    }
</script>

<style scoped>

</style>
